import React, { Component } from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as listActions from '../../../store/actions/list';
import {Types} from '../../../types/list.d';
import Product from '../../../components/product';
import './index.css';

interface Iprops{
    getCarList:() => void,
    carList:Types[],
    
}
interface Istate{}

class Recommend extends Component<Iprops,Istate>{
    componentDidMount(){
        this.props.getCarList();
    }
    render() {
        let {carList} = this.props;
        console.log("===carList",carList)
        let sum = carList.reduce((_prev:number,_cur:Types) => {
            _prev += _cur.children.reduce((v,c) => {
                v+=c.num*c.price
                return v
            },0)
            return _prev
        },0)
        console.log(sum)
        return (
            <div className="carlist">
                <div className="left">
                    <ul>
                        {carList.map(item => <li key={item.id}>{item.title} -- {item.num}</li>)}
                    </ul>
                </div>
                <div className="right">
                    <div>
                        {
                            carList.map((item,index) => <div key={item.id}>
                                <h6>{item.title}</h6>
                                {item.children.map(v => <Product 
                                                            parentIndex={index}
                                                            id={v.id} 
                                                            pic={v.pic} 
                                                            key={v.id} 
                                                            name={v.name} 
                                                            price={v.price}
                                                            num={v.num} 
                                                            desc={v.desc} ></Product>)}
                            </div>)
                        }
                    </div>
                </div>
            </div>
        )
    }
}


const stateMapToProps = (state:any) => {
    return {
        carList:state.carList
    }
}

const dispatchMapToProps = (dispatch:any) => {
    return bindActionCreators(listActions,dispatch)
}

export default connect(stateMapToProps,dispatchMapToProps)(Recommend)